<template>
	<view>
		<view class="actbanner">
			<view class="tab" :class="{'navtop':istop}">
				<view class="list">
					<text v-for="(item,index) in tablist" @click="setActive(index)" :class="{ active: active === index}" :key="index">{{item.name}}</text>
				</view>
			</view>
			<swiper class="swiper" id="swiper" ref="swiper" :style="{height:`${height}rpx`}" indicator-active-color="#FFFFFF" :current="active" :interval="5000" :duration="500"  @change="tabChange">
				<block v-for="(act,i) in activityLists" :key="i">
					<swiper-item>
						<!-- 活动列表 -->
						<activity :activityList="act" />
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	import activity from '@/components/activity'
	export default {
		name:"swiperTitle",
		props:{
			tablist:{
				type:Array,
				default:()=>{
					return []
				}
			},
			activityLists:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		components:{
			activity
		},
		data() {
			return {
				active: 0,
				height: 480,
				istop:false//分类导航是否置顶
			}
		},
		mounted() {
		    window.addEventListener("scroll", this.handleScroll);
		},
		updated() {
			this.setHeight();
		},
		methods:{
			handleScroll(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#swiper').boundingClientRect(data => {
					const { top } = data;
					if(top <= 90){
						this.istop = true;
					}else{
						this.istop = false;
					}
				}).exec();
			},
			setHeight() {
				this.height = 480 * this.activityLists[this.active].length;
			},
			tabChange(e){
				this.active = e.detail.current;
				this.height = 480 * this.activityLists[this.active].length;
				this.$emit('tabChange',this.active);
			},
			setActive(index){
				this.active = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
.navtop{
	width: 750rpx;
	padding: 30rpx;
	margin: 0 !important;
	position: fixed;
	top: 0;
	z-index: 99999;
	background: #F5F5F5;
}
.actbanner{
	margin: 0 auto;
	
	.swiper{
		height: 500rpx;
	}
	
	image{
		@include img;
		border-radius: 10rpx;
	}
	
	.tab{
		margin: 30rpx 0 30rpx 30rpx;
		
		.list {
			width: 100%;
			white-space: nowrap;
			overflow-x: scroll;
			
			text{
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				margin-right: 54rpx;
			}
			
			.active{
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FF6509;
			}
		}
	}
}
</style>
